<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>玩家信息</span>
          </div>
          <div>
            <div class="text-center">
              <!-- <userAvatar :user="user" /> -->
              <img
                :src="user.headimg"
                class="img-circle"
                width="100"
                height="100"
              />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" />玩家ID
                <div class="pull-right">{{ user.id }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="user" />玩家昵称
                <div class="pull-right">{{ user.nickname }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="user" />VIP等级
                <div class="pull-right">{{ user.vip }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />手机号码
                <div class="pull-right">{{ user.mobile }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="eye-open" />用户状态
                <div class="pull-right">
                  <el-tag size="mini" type="success" v-if="user.status == 1"
                    >正常</el-tag
                  >
                  <el-tag size="mini" type="danger" v-if="user.status == 0"
                    >禁用</el-tag
                  >
                </div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="money" />余额
                <div class="pull-right">
                  <span class="text">{{ user.money }}</span>
                </div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="tree" />剩余积分
                <div class="pull-right">
                  <span class="text">{{ user.jifen }}</span>
                </div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="money" />今日消费
                <div class="pull-right">
                  <span class="text">{{ day_pay }}</span>
                </div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="money" />库存价值
                <div class="pull-right">
                  <span class="text"
                    ><span class="text">{{ kc ||0}}</span></span
                  >
                </div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="money" />玩家盈亏
                <div class="pull-right">
                  <span class="text"
                    ><span class="text" :style="profit>0?'color:red':'color:green'">{{ profit||0 }}</span></span
                  >
                </div>
                <el-date-picker
                  @change="changetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="value2"
                  size="mini"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                >
                </el-date-picker>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />创建日期
                <div class="pull-right">
                  {{ user.createTime }}
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>消费记录</span>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="库存统计" name="resetPwd">
              <userKc :ID="ID" />
            </el-tab-pane>
            <el-tab-pane label="余额消费记录" name="ye">
              <userXf :ID="ID" />
            </el-tab-pane>
            <el-tab-pane label="积分消费记录" name="jf">
              <userJf :ID="ID" />
            </el-tab-pane>

          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import userAvatar from "./userAvatar";
import userXf from "./xf_list.vue";
import userKc from "./kc_list.vue";
import userJf from "./jf_list.vue";
import { getUserProfit } from "@/api/system/user";
import {
  getMy_user,
  getMy_user_consume,
  getMy_user_stock,
} from "@/api/users/user.js";

export default {
  name: "UserXq",
  components: { userXf, userKc, userJf },
  data() {
    return {
      kc: null,
      day_pay: null,
      ID: null,
      profit: null,
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: "resetPwd",
      value2: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },

  created() {
    this.ID = this.$route.params.userid;
    this.gettime();

    this.getUserProfit(this.ID);
    this.getUser(this.ID);
    this.getMy_user_stock(this.ID);
    this.getMy_user_consume(this.ID);
  },
  methods: {
    msToDate(msec) {
      let datetime = new Date(msec);
      let year = datetime.getFullYear();
      let month = datetime.getMonth();
      let date = datetime.getDate();
      let hour = datetime.getHours();
      let minute = datetime.getMinutes();
      let second = datetime.getSeconds();

      let result1 =
        year +
        "-" +
        (month + 1 >= 10 ? month + 1 : "0" + (month + 1)) +
        "-" +
        (date + 1 < 10 ? "0" + date : date) +
        " " +
        (hour + 1 < 10 ? "0" + hour : hour) +
        ":" +
        (minute + 1 < 10 ? "0" + minute : minute) +
        ":" +
        (second + 1 < 10 ? "0" + second : second);

      let result2 =
        year +
        "-" +
        (month + 1 >= 10 ? month + 1 : "0" + (month + 1)) +
        "-" +
        (date + 1 < 10 ? "0" + date : date);

      let result = {
        hasTime: result1,
        withoutTime: result2,
      };

      return result;
    },
    changetime() {
      this.getUserProfit(this.ID);
    },

    gettime(val) {
      //获取前一天及今天的数据
      let ts_begin = new Date();
      let ts_end = new Date();
      ts_begin.setTime(
        ts_begin.getTime() -
          3600 * 1000 * ts_begin.getHours() -
          60 * 1000 * ts_begin.getMinutes() -
          1000 * ts_begin.getSeconds()
      );
      ts_end.setTime(ts_begin.getTime() + 3600 * 1000 * 24 - 1000);
      //格式化Sat Jul 23 2022 00:00:00 GMT+0800 (中国标准时间)

      this.value2 = [
        this.msToDate(ts_begin).hasTime,
        this.msToDate(ts_end).hasTime,
      ];
      console.log(this.value2);
    },

    getUser(id) {
      getMy_user(id).then((response) => {
        this.user = response.data;
        // this.roleGroup = response.roleGroup;
        // this.postGroup = response.postGroup;
      });
    },
    //获取用户今日消费
    getMy_user_consume(id) {
      getMy_user_consume(id).then((response) => {
        console.log(response);
        this.day_pay = response.data;
      });
    },
    //获取用户库存
    getMy_user_stock(id) {
      getMy_user_stock(id).then((response) => {
        console.log(response);
        this.kc = response.data;
      });
    },

    //获取用户盈亏
    getUserProfit(id) {
      getUserProfit({
        start: this.value2[0],
        end: this.value2[1],
        userId: id,
      }).then((response) => {
        console.log(response);
        this.profit = response.data;
      });
    },
  },
};
</script>

<style scoped>
.text {
  font-weight: 700;
  font-size: 25px;
  color: #007acc;
}
</style>
